<template>
    <div>
        <list>
            <cell class="content">
                <div class="box">
                    <div class="box-title">
                        <text class="box-title-text">会诊目的及方式</text>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">会诊目的</text>
                        </div>
                        <input type="text" class="input input-text mr-20" v-model="aim"></input>
                        <image :src="mustImg" class="mustTime"></image>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">会诊方式</text>
                        </div>
                        <div class="checkbox" :class="[huizhen===1?'active':'']" @click="huizhen=1">
                            <!-- <image :src="logoUrl" class="img-mini"></image> -->
                            <text class="checkbox-text" :class="[huizhen===1?'text-active':'']">图文会诊</text>
                        </div>
                        <div class="checkbox ml-20" :class="[huizhen===2?'active':'']" @click="huizhen=2">
                            <!-- <image :src="video1" v-if="huizhen===2" class="img-mini"></image>
                            <image :src="video2" v-if="huizhen!==2" class="img-mini"></image> -->
                            <text class="checkbox-text" :class="[huizhen===2?'text-active':'']">视频会诊</text>
                        </div>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">会诊类型</text>
                        </div>
                        <div class="checkbox" :class="[huizhenType===0?'active':'']" @click="worry0">
                            <text class="checkbox-text" :class="[huizhenType===0?'text-active':'']">普通会诊</text>
                        </div>
                        <div class="checkbox ml-20" :class="[huizhenType===1?'active':'']" @click="worry1">
                            <text class="checkbox-text" :class="[huizhenType===1?'text-active':'']">急诊会诊</text>
                        </div>
                        <div class="checkbox ml-20" :class="[huizhenType===2?'active':'']" @click="worry2">
                            <text class="checkbox-text" :class="[huizhenType===2?'text-active':'']">远程查房</text>
                        </div>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">医生级别</text>
                        </div>
                        <div class="checkbox" :class="[level===0?'active':'']" @click="level0">
                            <text class="checkbox-text" :class="[level===0?'text-active':'']">普通</text>
                        </div>
                        <div class="checkbox ml-20" :class="[level===1?'active':'']" @click="level1">
                            <text class="checkbox-text" :class="[level===1?'text-active':'']">专家</text>
                        </div>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">会诊医生</text>
                        </div>
                        <div class="input w416 mr-20" @click="onSelectDoctor">
                            <text class="input-text">{{aimDoctorName}}</text>
                        </div>
                        <image :src="mustImg" class="mustTime"></image>
                    </div>
                    <div class="box-main-line" v-if="huizhenType ==0 ||huizhenType==2">
                        <div class="box-main-title">
                            <text class="box-main-title-text">预约时间</text>
                        </div>
                        <div class="input mr-20" @click="huizhenTime">
                            <text class="input-text">{{timess}}</text>
                        </div>
                        <image :src="mustImg" class="mustTime"></image>
                    </div>
                    <!-- <div class="box-main-line">
                         <div class="box-main-title">
                             <text class="box-main-title-text">会诊价格</text>
                         </div>
                         <div class="box-main-title">
                             <text class="box-main-title-text text-blue">￥{{moneys}}</text>
                         </div>
                     </div>-->
                </div>
                <div class="line"></div>
                <div class="box">
                    <div class="box-title">
                        <text class="box-title-text">患者基本信息</text>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">姓名</text>
                        </div>
                        <input type="text" class="input w468 input-text mr-20" v-model="aidname"></input>
                        <image :src="mustImg" class="mustTime"></image>
                    </div>
                    <div class="box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">性别</text>
                        </div>
                        <div class="checkbox" :class="[gender===0?'active':'']" @click="gender=0">
                            <text class="checkbox-text" :class="[gender===0?'text-active':'']">男</text>
                        </div>
                        <div class="checkbox ml-72" :class="[gender===1?'active':'']" @click="gender=1">
                            <text class="checkbox-text" :class="[gender===1?'text-active':'']">女</text>
                        </div>
                    </div>
                    <div class="box box-main-line">
                        <div class="box-main-title">
                            <text class="box-main-title-text">年龄</text>
                        </div>
                        <input type="tel" class="input w552 input-text" v-model="age"></input>
                    </div>
                    <div>
                        <div class="box box-main-title ml-40">
                            <text class="box-main-title-text">初步诊断</text>
                        </div>
                        <div class="ml-40">
                            <textarea class="textarea" row="4" @input="onInputDiagnosis" :value="diagnosis"></textarea>
                        </div>
                    </div>
                    <div class="box-main-line dis-flex">
                        <div class="box-main-title">
                            <text class="box-main-title-text">添加附件</text>
                        </div>
                        <div class="add-accessory">
                            <div class="add-checkbox" @click="pickImage">
                                <text class="checkbox-text">照片</text>
                            </div>
                            <div class="add-checkbox ml-10" @click="captureImage">
                                <text class="checkbox-text">拍照</text>
                            </div>
                            <div class="add-checkbox ml-10" @click="yunImage">
                                <text class="checkbox-text">影像</text>
                            </div>
                            <div class="add-checkbox ml-10" @click="onSelectOtherFile">
                                <text class="checkbox-text">其他</text>
                            </div>
                        </div>
                    </div>
                    <div class="accessory" v-if="attachments.length">
                        <div class="accessory-box" v-for="(attach,index) in attachments" :key="index">
                            <image :src="attach.fileUrl" class="accessory-img"></image>
                            <div class="tab-detel" @click="delattrach(index)">
                                <text class="tab-detel-text">X</text>
                            </div>
                        </div>
                    </div>
                    <div class="accessory" v-if="attachmentsFile.length">
                        <div class="file" v-for="(attrachFile,index) in attachmentsFile" :key="index">
                            <text>{{attrachFile.title}}</text>
                            <div class="tab-detel" @click="delattrachFile(index)">
                                <text class="tab-detel-text">X</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-box" :class="[isIos?'mb-80':'']">
                    <div class="btn" @click="reqConsultation">
                        <text class="btn-text">确认新建</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
    import Resource from "../../../dist/res/Resource";
    import weexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/DateUtil"

    var modal = weex.requireModule('modal')
    var nativemodule = weex.requireModule("acmedEventModule");

    export default {
        name: 'EMNewApply',
        data: function () {
            return {
                closeimg: Resource.getResource("title_cha_img.png"),
                doctorname: Resource.getResource("name.png"),
                pickerTime: Resource.getResource("aimDoctorName.png"),
                mustImg: Resource.getResource("must.png"),
                huizhen: 1,
                huizhenType: 0,
                gender: 0,
                level: 0,
                aim: '',
                age: '',
                aidname: '',
                aimDoctorId: '',
                aimDoctorName: '',
                aimHospitalId: '',
                applyDoctorId: '',
                applyDoctorName: '',
                applyHospitalId: 1,
                attachments: [],
                attachmentsFile: [],
                idCard: "",
                diagnosis: "",
                timess: '',
                moneys: '300',
                normalDoctorId: "",
                normalDoctorName: "",
                normalDoctorHospitalId: "",
                seletedtime: "",
                huizhengtime: "",
                publicAttachments: [],
                isIos: false
            }
        },
        created: function () {
            var _self = this
            if (weex.config.env.osName == 'iOS') {
                _self.isIos = true
            }
        },
        mounted: function () {
            var _self = this
            nativemodule.callNative("userinfo", "", function (event) {
                _self.applyDoctorId = event.id
                _self.applyDoctorName = event.username
                _self.applyHospitalId = event.virtualDeptId
                //nativemodule.callNative("toast",event,null);
            });
            nativemodule.callNative("hasyundata", "", function (yundata) {
                // if (yundata) {
                //     var idx = yundata.age.indexOf("岁");
                //     var c_age = idx > 0 ? yundata.age.substring(0, idx) : yundata.age
                //     _self.gender = parseInt(yundata.gender)
                //     _self.aidname = yundata.username
                //     _self.age = c_age
                //     _self.idCard = yundata.idcard
                //     _self.attachments = [{
                //         category: "2",
                //         title: "影像",
                //         fileUrl: yundata.thumbnail,
                //         hospitalId: _self.aimHospitalId,
                //         belongTo: yundata.studyiuid
                //     }]
                // }
                if(yundata){
                    _self.gender = parseInt(yundata.gender)
                    _self.aidname = yundata.username
                    _self.age = yundata.age
                    yundata.attachment.map(function(item){
                        modal.alert({
                            message: JSON.stringify(item),
                            duration: 0.3
                        })
                        if(item.category == "0" || item.category == "1" || item.category == "2"){
                            var attrach = {
                                category: item.category,
                                title: item.title,
                                fileUrl: item.fileUrl,
                                belongTo: item.belongTo
                            }
                            _self.attachments.push(attrach)
                            _self.publicAttachments.push(attrach)
                        }
                        if(item.category == "4"){
                            var attrach = {
                                category: item.category,
                                fileUrl: '',
                                title: item.title,
                                belongTo: item.belongTo
                            }
                            _self.attachmentsFile.push(attrach)
                            _self.publicAttachments.push(attrach)
                        }
                    })
                }
                // nativemodule.callNative("toast",yundata.username,null)
            });
            weexNativeModule.getParam(function (res) {
                _self.normalDoctorId = res.normalDoctorId;
                _self.normalDoctorName = res.normalDoctorName;
                _self.normalDoctorHospitalId = res.normalDoctorHospitalId;
                _self.aimDoctorId = res.normalDoctorId;
                _self.aimDoctorName = res.normalDoctorName;
                _self.aimHospitalId = res.normalDoctorHospitalId;
//                _self.aimHospitalId = res.normalDoctorHospitalName;
            })
        },
        methods: {
            onInputDiagnosis: function (event) {
                this.diagnosis = event.value
            },
            onSelectDoctor: function (event) {
                var _self = this
                if (_self.level == 1) {
                    nativemodule.callNative("selectDoctor", "selectDoctor", function (event) {
                        _self.aimDoctorId = event.userId
                        _self.aimDoctorName = event.userName
                        _self.aimHospitalId = event.hospitalId
                        _self.huizhengtime = event.datetime;
                        _self.timess = event.datetime + " 00:00";

                        // nativemodule.callNative("toast",event,null);
                    });
                }
            },
            onSelectOtherFile: function () {
                var _self = this;
                nativemodule.callNative("selectOtherFile", "selectOtherFile", function (event) {
                    var attrachFile = {
                        category: "3",
                        title: event.filename,
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
//                    nativemodule.callNative("toast",attrach,null);
                    _self.attachmentsFile.push(attrachFile)
                    _self.publicAttachments.push(attrachFile)
                });
            },
            closeit: function (event) {
                nativemodule.callNative("finish", event, null);
            },
            pickImage: function (event) {
                var _self = this;
                nativemodule.callNative("pickImage", "pickImage", function (event) {
                    var attrach = {
                        category: "0",
                        title: "图片",
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
                    // nativemodule.callNative("toast",attrach,null);
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)
                });
            },
            captureImage: function (event) {
                var _self = this;
                nativemodule.callNative("captureImage", "captureImage", function (event) {
                    var attrach = {
                        category: "1",
                        title: "照片",
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
                    // nativemodule.callNative("toast",attrach,null);
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)

                });
            },
            yunImage: function (event) {
                var _self = this;
                nativemodule.callNative("yunImage", "yunImage", function (event) {
                    var attrach = {
                        category: "2",
                        title: "影像",
                        fileUrl: event.thumbnail,
                        hospitalId: _self.aimHospitalId,
                        belongTo: event.studyiuid
                    }
                    // nativemodule.callNative("toast",attrach,null);
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)

                });
            },
            delattrach: function (index) {
                this.attachments.splice(index, 1)
            },
            delattrachFile: function (index) {
                this.attachmentsFile.splice(index, 1)
            },
            reqConsultation: function () {
                var _self = this
                if (_self.aim == '' || _self.aim.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    modal.alert({
                        message: '请输入会诊目的!',
                        duration: 0.3
                    })
                    return
                }
                if (_self.aimDoctorName == '') {
                    modal.alert({
                        message: '请选择会诊医生!',
                        duration: 0.3
                    })
                    return
                }
                if (_self.huizhenType == 0 || _self.huizhenType == 2) {
                    if (_self.level == 0) {
                        if (_self.timess == '') {
                            modal.alert({
                                message: '请选择预约时间!',
                                duration: 0.3
                            })
                            return
                        }
                    }
                }
                if (_self.aidname == '' || _self.aidname.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    modal.alert({
                        message: '请输入患者姓名!',
                        duration: 0.3
                    })
                    return
                }
                //nativemodule.callNative("toast",this.aim +' '+this.aidname,null);
                var reqparam = {
                    address: "明基医院急诊科",
                    age: _self.age == '' ? '0' : _self.age,
                    aim: _self.aim.replace(/ /g, ''),
                    aimDoctorId: _self.aimDoctorId,
                    aimDoctorName: _self.aimDoctorName,
                    aimHospitalId: _self.aimHospitalId,
                    applyDoctorId: _self.applyDoctorId,
                    applyDoctorName: _self.applyDoctorName,
                    applyHospitalId: _self.applyHospitalId,
//                    applyHospitalName: _self.applyHospitalName,
                    chiefComplaint: "",
                    consultationMode: _self.huizhen,
                    diagnosis: _self.diagnosis,
                    gender: _self.gender,
                    idCard: (_self.idCard == '' || _self.idCard == 'undefined' || _self.idCard == null )
                        ? '320501191812129088' : _self.idCard,
                    userName: _self.aidname.replace(/ /g, ''),
                    attachments: _self.publicAttachments,
                    category: _self.huizhenType,
                    isExpert: _self.level,
                }
                if (_self.huizhenType == 0 || _self.huizhenType == 2) {
                    reqparam.status = 3;
                    reqparam.appointmentTime = _self.timess;
                }
                nativemodule.callNative("reqconsultation", reqparam, function (msg) {
                    modal.alert({
                        message: msg,
                        duration: 0.3
                    })
                });
            },
            huizhenTime: function () {
                let _self = this
                let defaultdate;
                if (_self.seletedtime) {
                    defaultdate = DateUtil.formatTime(
                        new Date(_self.seletedtime), 'yyyy-MM-dd hh:mm:ss');
                } else {
                    defaultdate = DateUtil.formatTime(
                        new Date(), 'yyyy-MM-dd hh:mm:ss');
                }
                weexNativeModule.selectDateTime(defaultdate, false, false, false, true, true, false, false, "", "", function (time) {
                    let iosTime = time.data.replace(/-/g, "/")
                    _self.seletedtime = DateUtil.formatTime(iosTime, 'yyyy-MM-dd hh:mm:ss')
                    _self.timess = _self.huizhengtime + " " + DateUtil.formatTime(iosTime, 'hh:mm')
                    if (_self.level == 0) {
                        _self.timess = DateUtil.formatTime(new Date(), 'yyyy-MM-dd') + " " + DateUtil.formatTime(iosTime, 'hh:mm')
                    }

                })
            },
            level0: function () {
                var _self = this
                _self.level = 0
                _self.moneys = 300
                _self.aimDoctorId = _self.normalDoctorId
                _self.aimDoctorName = _self.normalDoctorName
                _self.aimHospitalId = _self.normalDoctorHospitalId
                _self.timess = ''
            },
            level1: function () {
                var _self = this
                _self.aimDoctorId = ""
                _self.aimDoctorName = ""
                _self.aimHospitalId = ""
                _self.level = 1
                _self.moneys = 500
                _self.timess = ''
                _self.onSelectDoctor();
            },
            worry0: function () {
                var _self = this
                _self.huizhenType = 0
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            },
            worry1: function () {
                var _self = this
                _self.huizhenType = 1
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            },
            worry2: function () {
                var _self = this
                _self.huizhenType = 2
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            }
        }
    }
</script>
<style scoped>
    .w416 {
        width: 416px;
    }

    .w468 {
        width: 468px;
    }

    .w500 {
        width: 500px;
    }

    .w552 {
        width: 552px;
    }

    .text-blue {
        color: #556ce7;
    }

    .active {
        background-color: #7a7ceb;
    }

    .text-active {
        color: #FFF;
    }

    .ml-10 {
        margin-left: 10px;
    }

    .ml-20 {
        margin-left: 20px;
    }

    .ml-40 {
        margin-left: 40px;
    }

    .ml-72 {
        margin-left: 72px;
    }

    .ml-80 {
        margin-left: 80px;
    }

    .mr-30 {
        margin-right: 30px;
    }

    .mr-20 {
        margin-right: 20px;
    }

    .mT-100 {
        margin-top: 100px;
    }

    .dis-flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }

    .header {
        flex-direction: row;
        justify-content: space-between;
        width: 750px;
        height: 100px;
        background-color: #7a7ceb;
    }

    .header-img {
        width: 60px;
        height: 60px;
        margin-left: 40px;
        margin-top: 30px;
    }

    .header-right {
        width: 60px;
        height: 60px;
        margin-right: 40px;
    }

    .header-title {
        font-size: 36px;
        color: #FFF;
        margin-top: 40px;
    }

    .line {
        width: 750px;
        height: 20px;
        background-color: #f2f2f2;
    }

    .content {
        box-sizing: border-box;
    }

    .box {
        margin-bottom: 40px;
    }

    .box-title {
        justify-content: center;
        height: 128px;
        border-left-style: solid;
        border-left-width: 10px;
        border-left-color: #7a7ceb;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #f2f2f2;
    }

    .box-title-text {
        font-size: 32px;
        color: #666;
        margin-left: 30px;
    }

    .box-main-line {
        flex-direction: row;
        align-items: center;
        height: 60px;
        padding-left: 40px;
        padding-right: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
        position: relative;
    }

    .box-main-title {
        /*margin-left: 40px;*/
        margin-right: 40px;
    }

    .box-main-title-text {
        font-size: 30px;
        color: #666;
    }

    .input {
        flex: 1;
        justify-content: center;
        box-sizing: border-box;
        padding-left: 8px;
        height: 60px;
        background-color: #f2f2f2;
        border-style: solid;
        border-radius: 5px;
    }

    .input-text {
        font-size: 30px;
        color: #999;
    }

    .textarea {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 150px;
        background-color: #f2f2f2;
        padding-left: 8px;
        padding-top: 10px;
        font-size: 30px;
        color: #999;
        border-radius: 5px;
        margin-right: 40px;
    }

    .checkbox {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        /*width: 240px;*/
        height: 60px;
        flex-direction: row;
        justify-content: center;
        background-color: #f2f2f2;
        align-items: center;
        border-radius: 5px;

    }

    .checkbox-text {
        font-size: 30px;
        color: #999;
    }

    .img {
        width: 44px;
        height: 44px;
    }

    .img-mini {
        width: 44px;
        height: 30px;
    }

    .click-img {
        width: 60px;
        height: 60px;
    }

    .btn {
        width: 700px;
        height: 80px;
        background-color: #7a7ceb;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .btn-text {
        font-size: 32px;
        color: #FFF;
    }

    .add-accessory {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 60px;
        flex-direction: row;
        justify-content: space-between;
    }

    .add-checkbox {
        /*width: 153px;*/
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 60px;
        background-color: #f2f2f2;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
    }

    .accessory {
        margin-left: 40px;
        margin-top: 40px;
        width: 670px;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        background-color: #f2f2f2;
        border-radius: 5px;
        padding-bottom: 15px;
    }

    .accessory-box {
        position: relative;
        width: 190px;
        height: 190px;
        border-radius: 5px;
        margin-left: 17px;
        margin-top: 20px;
        border-style: solid;
        border-width: 1px;
        border-color: #999;
    }

    .file {
        position: relative;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
        padding-right: 50px;
        margin-left: 17px;
        margin-top: 20px;
        border-style: solid;
        border-width: 1px;
        border-color: #999;
    }

    .tab-detel {
        width: 30px;
        height: 30px;
        background-color: #999;
        border-radius: 15px;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .tab-detel-text {
        font-size: 28px;
        color: #fff;
    }

    .accessory-img {
        width: 190px;
        height: 190px;
        border-radius: 5px;
    }

    .btn-box {
        width: 750px;
        align-items: center;
    }

    .mb-80 {
        margin-bottom: 140px;
    }

    .mustTime {
        width: 20px;
        height: 20px;
    }

    .pickerTime {
        width: 50px;
        height: 50px;
    }
</style>